<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>01.custom-plugin</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <p v-upper="msg"></p>
            {{msg | toUpper}}
        </div>
        <script type="text/javascript">
            // TODO:定义与使用插件，理解插件中可以包含的内容
            let MyPlugin = {};
            MyPlugin.install = function (Vue, options) {
                Vue.myGlobalMethod = function () {
                    console.log('method');
                };
                //添加全局指令
                Vue.directive('upper',function(el,binding){
                    el.innerHTML = binding.value.toUpperCase();
                });
                 // 添加全局过滤器
                Vue.filter('toUpper',function(value) {
                    return value.toUpperCase();
                });
                // 以后还可以添加全局的混入，全局的组件
                Vue.prototype.$myMethod = function () {
                    console.log('实例方法');
                };
            };
            window.MyPlugin = MyPlugin;                       
            Vue.use(MyPlugin);
            Vue.myGlobalMethod();

            let vm = new Vue({
                el: '#app',
                data: {
                    msg: 'atguigu',
                },
            });
            vm.$myMethod();
            console.log(vm);
            
        </script>
    </body>
</html>
